<!-- 富文本编辑器 -->
<template>
  <div class="rich-editor">
    <Toolbar
      :editor="editorRef"
      :default-config="toolbarConfig"
      mode="simple"
    />
    <Editor
      v-model="valueHtml"
      :default-config="editorConfig"
      mode="simple"
      @onCreated="handleCreated"
      @onChange="handleChange"
      @customPaste="customPaste"
    />
  </div>
</template>
<script name="RichEditor" setup>
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { FileHandle } from '@/units'
import { getBaseURL } from '@/config/url.js'

const { handleUploadFile } = FileHandle()

const props = defineProps({
  // 富文本内容
  richValue: {
    type: String,
    default: '',
  },
})

const editorRef = shallowRef()
const valueHtml = ref(props.richValue)

const toolbarConfig = {
  toolbarKeys: [
    'fontSize',
    'bold',
    'italic',
    'underline',
    'justifyLeft',
    'justifyCenter',
    'justifyRight',
    'uploadImage',
    'insertLink',
  ],
}
// 判断富文本是否为空
const getText = (str) => {
  return str
    .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
    .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
    .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
    .replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
}
const emits = defineEmits(['changeRich'])
const handleChange = () => {
  emits('changeRich', getText(valueHtml.value) == '' ? '' : valueHtml.value)
}

const editorConfig = {
  placeholder: '',
  MENU_CONF: {
    uploadImage: {
      base64LimitSize: 5 * 1024,
      async customUpload(file, insertFn) {
        const { name, path } = await handleUploadFile(file)
        let fileURL = ''
        if (path.includes('http')) {
          fileURL = path
        } else {
          const commonBaseURL = getBaseURL('common')
          fileURL = `${commonBaseURL}${path}`
        }
        insertFn(fileURL, name, fileURL)
      },
    },
  },
}
const customPaste = (editor, event, callback) => {
  // 自定义插入内容
  // await editor.insertText(pasteText)
  editor.insertText(' ')

  // 返回值（注意，vue 事件的返回值，不能用 return）
  // callback(false) // 返回 false ，阻止默认粘贴行为
  callback(true) // 返回 true ，继续默认的粘贴行为
}
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor
}
</script>
<style scoped>
.rich-editor {
  width: 100%;
  height: 100%;
}
.rich-editor p strong span {
  font-weight: bold;
  font-family: Source Han Sans CN-Bold;
}
.rich-editor:deep(.w-e-toolbar) {
  background: #f5f7fe;
  border-radius: 9px 9px 0px 0px;
  height: 46px;
  border-bottom: 1px solid #ccd0de;
}
.rich-editor:deep(.w-e-bar-item) {
  height: 100%;
  padding: 0;
}
.rich-editor:deep(.w-e-bar-item button:hover),
.rich-editor:deep(.w-e-bar-item .disabled:hover) {
  background-color: inherit;
  color: inherit;
}
.rich-editor:deep(.w-e-bar-item-group .w-e-bar-item-menus-container) {
  margin-top: 46px;
}
.rich-editor:deep(.w-e-text-container [data-slate-editor]) {
  height: calc(100% - 46px);
  font-size: 18px;
}
.rich-editor:deep(.w-e-text-container [data-slate-editor] p:last-of-type) {
  margin-bottom: 30px;
}
.rich-editor:deep([data-w-e-textarea='true']) {
  height: calc(100% - 46px) !important;
  border-radius: 10px;
}
.rich-editor:deep([data-w-e-toolbar='true']) {
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(0, 22, 93, 0.2);
  border-bottom: none;
}
.rich-editor:deep(.w-e-scroll) {
  border: 1px solid rgba(0, 22, 93, 0.2);
  border-radius: 0 0 10px 10px;
  border-top: none;
}
/* 加粗不管用 */
:deep(.w-e-text-container p .bold span) {
  font-weight: bolder;
}

/* :deep(.w-e-text-container) {
  height: 375px;
}
:deep(.w-e-text-container p) {
  margin: 0;
  height: auto;
  line-height: 30px;
  display: flex;
  align-items: flex-start;
} */
</style>
